<template>
	<div
		class="flex-col s-center m-center item p-x-5"
		:title="item.title"
		draggable="true"
		@dragstart="
			(e) => {
				e.dataTransfer.setData('data', JSONStringify(item));
			}
		"
	>
		<slot>
			<el-image
				class="m-y-5 pointer"
				style="width: 50px; height: 50px"
				:src="item.url ?? getImgUrl('scene/equip_general.png')"
				fit="contain"
			/>
			<span class="ellipsis w100 tc">{{ item.title }}</span>
		</slot>
	</div>
</template>

<script setup>
import { JSONStringify } from '@/utils';

defineProps({
	item: {
		type: Object
	}
});
</script>

<style lang="scss" scoped>
.item {
	background: var(--color-bg-3);
	border-radius: 4px;
	border: 1px solid transparent;
	transition: var(--el-transition-all);
	&:hover {
		background: var(--color-bg-1);
		border-color: var(--el-color-primary);
	}
}
</style>
